<template>
  <div>
    <Search />
    <el-card>
      <el-row class="box">
        <el-button round type="success" @click="$router.push('warehouse/details')">新增仓库</el-button>
      </el-row>
      <el-table
        :data="dataList"
        border
        style="width: 100%"
        max-height="250"
        :header-cell-style="{
          'text-align': 'center',
          backgroundColor: '#F9F6EF',
        }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column type="index" prop="index" label="序号" width="150" />
        <el-table-column prop="code" label="仓库编码" width="120" />
        <el-table-column prop="type" label="仓库类型" width="120" />
        <el-table-column prop="location" label="省/市/区" width="120" />
        <el-table-column prop="address" label="详细地址" width="300" />
        <el-table-column prop="status" label="仓库状态" width="120" :formatter="formatStore" />
        <el-table-column prop="surface" label="仓库面积m²" width="120" />
        <el-table-column prop="includedNum" label="库区数量" width="120" />
        <el-table-column prop="personName" label="负责人" width="120" />
        <el-table-column prop="phone" label="联系电话" width="120" />
        <el-table-column prop="updateTime" label="更新时间" width="120" />
        <el-table-column fixed="right" label="操作" width="150">
          <template>
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">停用</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-row>
      <el-col :span="12" :offset="6">
        <el-pagination
          :page-size="pageConfig.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageConfig.total"
          @current-change="changePage"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { mapActions } from 'vuex'

export default {

  data() {
    return {
      // 数据列表
      dataList: [],
      // 分页
      pageConfig: {
        // 总条数
        total: 40,
        // 每页数量
        size: 1,
        // 当前页
        current: 1
      },
      // 仓库状态
      store: [
        {
          id: 0,
          value: '停用'
        },
        {
          id: 1,
          value: '启用'
        }
      ]
    }
  },
  async  created() {
    this.getWarehouseList()
  },
  methods: {
    ...mapActions('warehouse', ['getWarehouseDetails']),
    //  渲染页面
    async getWarehouseList() {
      await this.getWarehouseDetails()
      this.dataList = this.$store.getters.FormData.dataList
      this.dataList.forEach(item => {
        if (item.type === 'ZZ') {
          item.type = '中转仓'
        } else if (item.type === 'JG') {
          item.type = '加工仓'
        } else if (item.type === 'CB') {
          item.type = '存储仓'
        } else if (item.type === 'LC') {
          item.type = '冷藏仓'
        }
      })
    },
    // 点击当前页，显示当前页数据
    changePage(newPage) {
      this.pageConfig.current = newPage
      this.getWarehouseList()
    },
    // 格式化仓库状态
    formatStore(row, col, val) {
      const state = this.store.find(item => item.id === val)
      return state ? state.value : '未知'
    }

  }

}

</script>

<style  lang="scss" scoped>
.box {
  margin-bottom: 20px;
}

.el-button--text {
  color: #ffb200;

  &:hover {
    color: #ff8e00;
  }
}

.el-table__row .hover-row {
  background-color: #ff8e00 !important;
}
</style>
